<template>
  <div class="drag-sort-manager">
    <slot 
      :environments="sortedEnvironments"
      :drag-handlers="dragHandlers"
      :is-dragging="isDragging"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { componentLogger } from '@/utils/logger'

const props = defineProps({
  environments: {
    type: Array,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['sort-change'])

// 响应式数据
const isDragging = ref(false)
const draggedIndex = ref(-1)
const dragOverIndex = ref(-1)
const sortedEnvironments = ref([...props.environments])

// 监听环境变化
watch(() => props.environments, (newEnvs) => {
  sortedEnvironments.value = [...newEnvs]
}, { deep: true })

// 拖拽处理器
const dragHandlers = {
  onDragStart: (data) => {
    if (props.disabled) return
    isDragging.value = true
    draggedIndex.value = data.index
    dragOverIndex.value = data.index
  },
  
  onDragMove: (data) => {
    if (!isDragging.value) return
    
    // 计算当前拖拽位置对应的索引
    const newIndex = calculateDropIndex(data.currentPos)
    if (newIndex !== dragOverIndex.value) {
      dragOverIndex.value = newIndex
      updateSortOrder()
    }
  },
  
  onDragEnd: (data) => {
    if (!isDragging.value) return
    
    isDragging.value = false
    
    // 最终排序
    if (draggedIndex.value !== dragOverIndex.value) {
      const newEnvironments = [...sortedEnvironments.value]
      const draggedItem = newEnvironments.splice(draggedIndex.value, 1)[0]
      newEnvironments.splice(dragOverIndex.value, 0, draggedItem)
      
      // 更新排序值
      newEnvironments.forEach((env, index) => {
        env.sort_order = index + 1
      })
      
      sortedEnvironments.value = newEnvironments
      emit('sort-change', newEnvironments)
    }
    
    draggedIndex.value = -1
    dragOverIndex.value = -1
  }
}

// 计算拖拽位置对应的索引
const calculateDropIndex = (pos) => {
  // 这里可以根据实际布局计算索引
  // 简化实现，返回当前拖拽索引
  return draggedIndex.value
}

// 更新排序顺序
const updateSortOrder = () => {
  if (draggedIndex.value === dragOverIndex.value) return
  
  const newEnvironments = [...sortedEnvironments.value]
  const draggedItem = newEnvironments.splice(draggedIndex.value, 1)[0]
  newEnvironments.splice(dragOverIndex.value, 0, draggedItem)
  
  sortedEnvironments.value = newEnvironments
}

// 手动排序方法
const moveItem = (fromIndex, toIndex) => {
  if (fromIndex === toIndex) return
  
  const newEnvironments = [...sortedEnvironments.value]
  const item = newEnvironments.splice(fromIndex, 1)[0]
  newEnvironments.splice(toIndex, 0, item)
  
  // 更新排序值
  newEnvironments.forEach((env, index) => {
    env.sort_order = index + 1
  })
  
  sortedEnvironments.value = newEnvironments
  emit('sort-change', newEnvironments)
}

// 暴露方法
defineExpose({
  moveItem,
  resetSort: () => {
    sortedEnvironments.value = [...props.environments]
  }
})
</script>

<style scoped>
.drag-sort-manager {
  position: relative;
}

/* 拖拽时的视觉反馈 */
.drag-sort-manager.dragging {
  pointer-events: none;
}

.drag-sort-manager.dragging > * {
  transition: transform 0.2s ease;
}
</style>
